<template>
    <div class="box">
      <div class="logo">
        <img src="/static/lyl/logo.png" alt="">
        <div class="center">
          <input v-model="model" type="text" placeholder="请输入关键字进行搜索">
          <span @click="tiaose()"></span>
          <p>热门：  奇异果      牛排      山竹      牛油果</p>
        </div>
        <div class="logo-right">
          <router-link to="/myaccount">
            <button>
              <img src="/static/lyl/rentou.png" alt="">
              <span>个人中心</span>
            </button>
          </router-link>
          <router-link to="/shopno">
            <button>
              <img src="/static/lyl/xiaogou.png" alt="">
              <span>购物车</span>
            </button>
          </router-link>
        </div>
      </div>

      <div class="fenlei">
        <span class="spa" @mouseleave="ishide()" @mouseenter="isshow()">全部分类<img class="xia" src="/static/lyl/xiajian.png" alt="">
            <transition name="fade">
              <ul @mouseleave="moves2()" v-if="bol">
                <li @mouseenter="moves(index)" v-for="(item,index) in data">
                   <img :src="item.src" alt="">{{item.txt}}
                </li>
                <component :is="com"></component>
              </ul>
            </transition>
        </span>
        <router-link v-for="(item,index) in data2" :to="item.to">
          <span>|</span>
          <span @click="chang(index)" :class="{active:cur==index}">{{item.txt3}}</span>
        </router-link>
      </div>
    </div>
</template>

<script>
  import Fxiang0 from './Fxiang0'
  import Fxiang1 from './Fxiang1'
  import Fxiang2 from './Fxiang2'
  import Fxiang3 from './Fxiang3'
  import Fxiang4 from './Fxiang4'
  import Fxiang5 from './Fxiang5'
  import Fxiang6 from './Fxiang6'
  import Fxiang7 from './Fxiang7'
  import Fxiang8 from './Fxiang8'
    export default {
      name: "Nav2",
      components:{
        Fxiang0,
        Fxiang1,
        Fxiang2,
        Fxiang3,
        Fxiang4,
        Fxiang5,
        Fxiang6,
        Fxiang7,
        Fxiang8
      },
      data(){
        return {
          cur:this.$store.state.curs,
          model:'',
          com:null,
          bol:false,
          data:[
            {src:'/static/lyl/1.png',txt:'新鲜水果'},
            {src:'/static/lyl/2.png',txt:'生猛海鲜'},
            {src:'/static/lyl/3.png',txt:'肉类家禽'},
            {src:'/static/lyl/4.png',txt:'蛋奶素食'},
            {src:'/static/lyl/5.png',txt:'田园蔬菜'},
            {src:'/static/lyl/6.png',txt:'零食酒水'},
            {src:'/static/lyl/7.png',txt:'粮油杂货'},
            {src:'/static/lyl/8.png',txt:'礼品卡劵'},
            {src:'/static/lyl/9.png',txt:'家具用品'},
          ],
          data2:[
            {to:'/',txt3:'首页'},
            {to:'/expserver',txt3:'同城'},
            {to:'/five',txt3:'礼拜五'},
            {to:'/jfsc',txt3:'积分商城'},
            {to:'/scdd',txt3:'导航+'},
          ]
        }
      },
      methods:{
        tiaose(){
          if (this.model.length==0) {
            this.$router.push('/serchwu');
          }else{
            this.$router.push('/serchyou');
          }
        },
        isshow(){
          this.bol = true;
        },
        ishide(){
          this.bol = false;
        },
        moves(i){
          this.com = 'Fxiang'+i;
        },
        moves2(){
          this.com = null;
        },
        chang(i){
          this.$store.commit('changs',i)
        }
      }
    }
</script>

<style scoped>
  .box{
    width: 1280px;
    margin: auto;
  }
  .box .logo{
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
  }
  .box .logo>img{
    width: 370px;
    height: 70px;
  }
  .box .logo .center{
    position: relative;
    align-self: center;
  }
  .box .logo .center input{
    width: 460px;
    height: 40px;
    border: 1px solid #4b943d;
    padding-left: 14px;
    font-size: 14px;
  }
  .box .logo .center span{
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: 40px;
    height: 42px;
    background: url("/static/lyl/sou.png") no-repeat center #4b943d;
    cursor: pointer;
  }
  .box .logo .center p{
    position: absolute;
    left: 0;
    bottom: -20px;
    font-size: 14px;
  }
  .box .logo .logo-right{
    align-self: center;
  }
  .box .logo .logo-right button{
    width: 120px;
    height: 40px;
    border: 1px solid #e5e5e5;
    background: #f8f8f6;
    font-size: 14px;
    margin-left: 20px;
    cursor: pointer;
  }
  .box .logo .logo-right button img{
    width: 16px;
    vertical-align: middle;
    margin-right: 10px;
  }
  .box .fenlei{
    margin-top: 20px;
  }
  .box .fenlei span{
    font-size: 16px;
  }
  .box .fenlei>span{
    display: inline-block;
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }
  .box .fenlei a span:nth-child(1){
    color: #ccc;
  }
  .box .fenlei a span:nth-child(2){
    display: inline-block;
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
  }
  .box .fenlei a .active{
    background: #f08200;
    color: #fff;
  }
  .box .fenlei a span:hover{
    background: #f08200;
    color: #fff;
  }
  .box .fenlei .xia{
    margin-left: 14px;
  }
  .box .fenlei .spa{
    position: relative;
  }
  .box .fenlei .spa ul{
    position: absolute;
    left: 0;
    top: 50px;
    z-index: 999;
    width: 610px;
    overflow: hidden;
    opacity: 1;
  }
  .box .fenlei ul li{
    width: 150px;
    height: 50px;
    font-size: 16px;
    border-bottom: 1px solid #efeeec;
    text-align: center;
    line-height: 58px;
    background: #fff;
  }
  .box .fenlei ul li:hover{
    background: #ebffe7;
  }
  .box .fenlei ul li img{
    width: 24px;
    margin-right: 11px;
    vertical-align: middle;
  }

  .fade-enter,.fade-leave-to{
    height: 0;
  }
  .fade-enter-active,.fade-leave-active{
    transition: all .5s ease-in-out;
  }
  .fade-enter-to,.fade-leave{
    height: 459px;
  }
</style>
